<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>物美智能设备AP配置</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #all{
            margin: 20px auto;
            position: relative;
            width:320px;
            text-align:center;
        }
        #all #tab li{
            list-style: none;
            float: left;
            width: 94px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color:#fff;
            margin-left:10px;
        }
        #tab{
            height:40px;
        }
        #all .con{
            border:1px solid #ddd;
            padding:10px;
            margin:15px 10px;
        }
        .group{
            line-height:50px;
        }
        .group .btn{
            padding:4px 14px;
            background:#f56c6c;
            color:#fff;
            border:1px solid #ddd;
            border-radius:6px;
            width:190px;
        }
        .group span{
            width:85px;
            display:inline-block;
            font-size:14px;
        }
        .group input{
            line-height:24px;
            width:180px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var tab = document.getElementById("tab");
            var lis = tab.getElementsByTagName('li');//获得标签li的数组
            var cons = document.getElementsByClassName('con');//获得下面内容div的数组
            for(var i=0;i<lis.length;i++){
                lis[i].num = i;//给对象添加属性，赋值用于标记                
                lis[i].onclick = function(){
                    if(this.num==2){
                        window.location.href="/download/";
                    }
                    //tab内容显示和隐藏
                    for(var j = 0;j<cons.length;j++){
                        if(j==this.num){
                            cons[this.num].style.display = 'block';
                        }else{
                            cons[j].style.display = 'none';
                        }
                    } 
                    //设置选中   
                    for(var k=0;k<lis.length;k++){
                        if(k==this.num){
                            lis[this.num].style.backgroundColor ="#006DFE";   //设置为选中
                        }else{
                            lis[k].style.backgroundColor="#888";       //设置背景为灰色
                        }
                    }
                    
                }
            }
            // 根据url参数设置选中
            var value=getQueryVariable("tab");
            console.log("value",value);
            if(value==0){
                lis[0].onclick();
            }else if(value==1){
                lis[1].onclick();
            }
        }
        function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
        } 
        function wifiSubmit(){ 
            var ssid = document.getElementById("ssid").value;
            var password = document.getElementById("password").value;
            var uuid = document.getElementById("uuid").value;
            if(ssid=="" || password=="" || uuid==""){ 
                alert("WIFI的名称、密码和关联用户不能为空。")
                return;
            }else{
                // 确认提交
            }

            var button = document.getElementById("wifi_submit").submit();
        }
        function mqttSubmit(){ 
            var mqtt_address = document.getElementById("mqtt_address").value;
            var mqtt_port = document.getElementById("mqtt_port").value;
            if(mqtt_address=="" || mqtt_port==""){ 
                alert("MQTT的地址和端口不能为空");
                return;
            }else{
                //确认提交
            }
            var button = document.getElementById("mqtt_submit").submit();
        }    
    </script>
</head>

<body>
    <div style="width:100%;height:60px;font-size:22px;line-height:60px;background:#006DFE;color:#fff;text-align:center;">物美智能设备配置</div>

    <div id="all">
        <ul id="tab">
            <li style="background: #006DFE;">服务端</li>
            <li style="background: #888;">配网</li>
            <li style="background: #888;">上传证书</li>
        </ul>
        <div class="con" style="display:block;">
            <form name=”form1” method="post" action="mqtt" id="mqtt_submit">
                <div class="group">
                    <span>MQTT地址：</span>
                    <input type="text" name="mqtt_address" placeholder="www.wumei.live" id="mqtt_address">
                </div>
                <div class="group">
                    <span>MQTT端口：</span>
                    <input type="text" name="mqtt_port" placeholder="1883" id="mqtt_port">
                </div>
                <div class="group">
                    <span>MQTT账号：</span>
                    <input type="text" name="mqtt_account" placeholder="可选项">
                </div>
                <div class="group">
                    <span>MQTT密码：</span>
                    <input type="text" name="mqtt_password" placeholder="可选项">
                </div>
                <div style="line-height:50px;">
                    <span>使用证书：</span>
                    <input type="radio" name="is_certifi" id="unuse" value=0 checked> <label for="unuse" style="margin-right:20px;">不使用</label>
                    <input type="radio" name="is_certifi" id="use" value=1> <label for="use" style="margin-right:35px;">使用</label><br/>                
                </div>
                <div style="line-height:20px;" class="group">
                    <span></span>
                    <input type="button" class="btn"  value="连接服务端" onclick="mqttSubmit()">
                </div>
            </form>
        </div>


        <div class="con" style="display:none;">
            <form name=”form2” method="post" action="wifi" id="wifi_submit">
                <div class="group">
                    <span>WIFI名称：</span>
                    <input type="text" name="ssid" placeholder="不能包含中文" id="ssid">
                </div>
                <div class="group">
                    <span>WIFI密码：</span>
                    <input type="text" name="password" placeholder="不能包含中文" id="password">
                </div>
                <div class="group">
                    <span>关联用户：</span>
                    <input type="text" name="uuid" placeholder="用户ID或者手机号" id="uuid">
                </div>
                <div style="line-height:20px;" class="group">
                    <span></span>
                    <input type="button" class="btn" value="配网" onclick="wifiSubmit()" >
                </div>
            </form>
        </div>

        <div class="con"></div>
    </div>
</body>

</html>